<template>
  <el-dialog title="物料产品选择" v-model="dialogSelectVisiable">
    <el-row>
      <el-col :span="24">
        <el-form :model="searchItem" inline>
          <el-form-item label="物料编码">
            <el-input v-model="searchItem.itemCode" placeholder="请输入物料编码" />
          </el-form-item>
          <el-form-item label="物料名称">
            <el-input v-model="searchItem.itemName" placeholder="请输入物料名称" />
          </el-form-item>
          <el-form-item>
            <el-button @click="fetchItemList(searchItem)" type="primary">搜索</el-button>
          </el-form-item>
          <el-form-item>
            <el-button @click="resetSearch">重置</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="24">
        <el-table :data="pagedData" border stripe style="width: 100%" @row-click="handleRowClick">
          <el-table-column type="index" width="55" align="center"></el-table-column>
          <el-table-column prop="itemCode" label="物料编码" width="150"></el-table-column>
          <el-table-column prop="itemName" label="物料名称" width="150"></el-table-column>
          <el-table-column prop="specification" label="物料规格" width="150"></el-table-column>
          <el-table-column prop="unitName" label="单位" width="150"></el-table-column>
          <el-table-column prop="itemOrProduct" label="物料/产品" width="150"></el-table-column>
          <el-table-column prop="itemTypeName" label="所属分类" width="150"></el-table-column>
          <el-table-column prop="enableFlag" label="是否启用" width="120">
            <template #default="scope">
              <el-tag type="success" v-if="scope.row.enableFlag == 'Y'">是</el-tag>
              <el-tag type="danger" v-else-if="scope.row.enableFlag == 'N'">否</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="safeStockFlag" label="设置安全库存" width="120">
            <template #default="scope">
              <el-tag type="success" v-if="scope.row.safeStockFlag == 'Y' ">是</el-tag>
              <el-tag type="danger" v-else-if="scope.row.safeStockFlag == 'N'">否</el-tag>
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页组件 -->
        <el-pagination
            style="margin-top: 20px"
            background
            layout="prev, pager, next, total"
            :total="total"
            :page-size="pageSize"
            @current-change="handlePageChange"
        />
      </el-col>
    </el-row>

    <!-- 底部按钮 -->
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogSelectVisiable = false">取 消</el-button>
        <el-button type="primary" @click="selectItem">确 定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import {fetchItemList, handlePageChange, pagedData, pageSize, searchItem, total} from "@/api/md/item/itemLogic.js";
import {ref} from "vue";
import itemRequest from "@/api/md/item/item.js";

const dialogSelectVisiable = ref(false);

// 存储选中的行
const selectedItemId = ref(null);

// 处理表格行点击事件，保存选中的行Id
function handleRowClick(row) {
  selectedItemId.value = row.itemId;
}

// 处理点击“确定”按钮时的操作
function selectItem() {
  if (selectedItemId.value) {
    itemRequest.loadUpdateInfo(selectedItemId.value, (data) => {
      console.log("查询结果: ", data);
      // 有了data后,通过data.data.itemCode,data.data.itemName等数据即可
    });
  } else {
    console.warn("请先选择一项物料");
  }
}

// 初始化获取数据
fetchItemList(searchItem.value);
</script>
